<template>
	<view>
		<view class="uni-status-bar" style="background: #fff;"></view>
		<view class="hb-header">
			<view class="left">
				<view class="uni-page-head-btn"><i class="uni-btn-icon" style="color: rgb(0, 0, 0); font-size: 27px;"
						@click="back"></i></view>
			</view>
			<view class="title">{{$t('my.withdraw')}}</view>
			<view class="right" @click="onNative">
				{{$t('my.mention.record')}}
			</view>
		</view>
		<view class="container">
			<view class="form">
				<view class="form-item">
					<view style="line-height: 20px;text-align: center;">{{form.coin}}</view>
				</view>
			</view>
			<view class="form" v-if="form.coin">
				<view class="form-item">
					<text class="form-label">{{$t('my.mention.address')}}</text>
					<hb-input-charge-mention :placeholderText="`${$t('my.mention.addressPlace')}`"
						v-model="form.address" coin="">
						<image src="~@/static/my/rq-icon.png" style="width: 24px;height: 24px" slot="right"
							@click="onRqCode"></image>
					</hb-input-charge-mention>
				</view>
				<view class="type" v-if="form.coin == 'USDT'">{{$t('info.chainType')}}：<text>Polygon</text></view>
				<view class="type" v-if="form.coin == 'BTC'">{{$t('info.chainType')}}：<text>BNB Smart Chain(BEP20)</text></view>
				<view class="form-item">
					<text class="form-label">{{$t('info.number')}}</text>
					<hb-input-charge-mention :placeholderText="`${$t('my.mention.minNum')}`+ configs.min_withdrawal"
						type="number" v-model="form.quantity">
						<view slot="right" class="min-number-right">
							<text class="min-number-right-coin">{{form.coin}}</text>
							<view class="min-number-right-line"></view>
							<text class="min-number-right-all" @click="onAll">{{$t('info.all')}}</text>
						</view>
					</hb-input-charge-mention>
					<text class="form-footer-text balance"
						v-if="wallet.data">{{$t('yuebao.availableBalance')}}{{wallet.data[form.coin].balance_available}}
						{{form.coin}}</text>
				</view>
				<view class="form-item">
					<text class="form-label">{{$t('profit.remarks')}}({{$t('my.mention.chose')}})</text>
					<hb-input-charge-mention :placeholderText="`${$t('my.mention.remarks')}`" v-model="form.remark">
						<div slot="right"></div>
					</hb-input-charge-mention>
				</view>
				<view class="form-item">
					<text class="form-label">{{$t('pay.chargePass')}}</text>
					<hb-input-charge-mention :placeholderText="`${$t('pay.chargePassPlace')}`"
						v-model="form.secondary_password" type="password">
						<div slot="right"></div>
					</hb-input-charge-mention>
				</view>
				<view class="form-item">
					<text class="form-label">{{$t('my.mention.service')}}</text>
					<hb-input-charge-mention :disabled="true" v-if="interior == 1" v-model="interiorFee"
						:coin="form.coin">
					</hb-input-charge-mention>
					<hb-input-charge-mention :disabled="true" v-else v-model="fee" :coin="form.coin">
					</hb-input-charge-mention>
				</view>
			</view>
			<view class="footer">
				<view class="footer-top">
					<text class="footer-top-label">{{$t('my.mention.Arrival')}}</text>
					<text class="footer-top-number" v-if="interior == 1">{{form.quantity}}</text>
					<text class="footer-top-number"
						v-else>{{form.quantity > 0 ? Number((form.quantity - fee).toFixed(4)) : 0}} {{form.coin}}</text>
				</view>
				<view class="buttonBg" @click="onConfirm" :loading="loading">{{$t('my.mention.sure')}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		configs
	} from '@/api/configs';
	import {
		walletSend
	} from '@/api/wallet';
	import HbInputChargeMention from '@/components/hb-input-charge-mention';
	import {
		BigNumber
	} from '@/plugin/bignumber';
	export default {
		name: "index",
		components: {
			HbInputChargeMention
		},
		data() {
			return {
				form: {
					coin: '',
					address: '',
					quantity: '',
					secondary_password: '',
					remark: ''
				},
				configs: {},
				interiorFee: 0,
				interior: 0,
				loading: false,
				fee: 0,
				isBottomShow: false,
				height: 400,
				withdraw_coins: ['USDT'],
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				wallet: state => state.user.wallet,
			})
		},
		watch: {
			'form.quantity'(val) {
				let feeRate = new BigNumber(this.configs.network.out_fee_rate).div(new BigNumber(100)).times(new BigNumber(
					val)).toFormat().split(',').map(item => item.trim()).join('');
				if (feeRate < this.configs.network.out_fee) {
					this.fee = this.configs.network.out_fee;
				} else {
					if (feeRate == 'NaN') {
						this.fee = 0;
					} else {
						this.fee = feeRate;
					}
				}
			}
		},
		onShow() {
		},
		onLoad(e) {
			this.form.coin = e.coin;
		},
		created() {
			this.modifyCoin();
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			onNative() {
				uni.navigateTo({
					url: "/pages/my/mention-money/money-record?coin=" + this.form.coin
				})
			},
			onRqCode() {
				let _this = this;
				uni.scanCode({
					success: function(res) {
						_this.form.address = res.result
					}
				})
			},
			onAll() {
				this.form.quantity = Number(this.wallet[this.form.coin].balance_available);
			},
			onCheckAddress() {
				var address = this.form.address
				if (address.length < 42 && address.substr(0, 2) != '0x') {
					uni.showModal({
						title: '請填寫正確地址',
						showCancel: false
					})
					return false;
				}
			},
			modifyCoin() {
				configs(this.form.coin).then((res) => {
					this.configs = res.data;
					let feeRate = new BigNumber(this.configs.network.out_fee_rate).div(new BigNumber(100)).times(
						new BigNumber(this.form.quantity)).toFormat().split(',').map(item => item.trim()).join(
						'');
					if (feeRate < this.configs.network.out_fee) {
						this.fee = this.configs.network.out_fee;
					} else {
						if (feeRate == 'NaN') {
							this.fee = 0;
						} else {
							this.fee = feeRate;
						}
					}
				})
			},
			selectCoin(e) {
				this.form.coin = this.withdraw_coins[e.detail.value];
				this.modifyCoin();
				this.isBottomShow = false;
			},
			onConfirm() {
				if (Number(this.configs.min_withdrawal) <= Number(this.form.quantity)) {
					this.loading = true;
					uni.showLoading();
					var time = Math.round(new Date().getTime() / 1000);
					this.form.time = time
					walletSend(this.form).then((res) => {
						uni.hideLoading();
						this.loading = false;
						uni.showToast({
							icon: 'success',
							title: this.$t('my.mention.withdrawalS')
						});
						this.$store.dispatch('getBalanceAction');
						let time = setTimeout(() => {
							clearTimeout(time);
							uni.navigateBack({
								delta: 1
							});
						}, 1500);
					}).catch(() => {
						uni.hideLoading();
						this.loading = false;
					})
				} else {
					uni.showModal({
						title: this.$t('info.reminder'),
						content: this.$t('my.mention.num') + this.configs.min_withdrawal,
						showCancel: false
					});
				}

			},
		},
	}
</script>

<style scoped lang="scss">
	page {
		background: $hb-bg;
	}

	.hb-header {
		background: #fff;
	}

	.hb-header .right {
		color: $hb-primary-color;
	}

	.buttonBg {
		width: 100%;
		height: 94rpx;
		background: $hb-primary-color;
		background-size: cover;
		color: #fff;
		text-align: center;
		line-height: 94rpx;
		font-size: 30rpx;
	}

	.container {
		box-sizing: border-box;
		min-height: 100%;
		background-color: $hb-bg;
		padding: 0 20rpx;
		padding-bottom: 60rpx;
		overflow: hidden;

		.select-coin-wrap {
			width: 100%;
			position: relative;
			height: 100rpx;
			border-radius: 8rpx;

			.select-coin-content {
				position: absolute;
				box-sizing: border-box;
				padding: 0 20rpx;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: flex;
				align-items: center;
				justify-content: space-between;

				&-right {
					display: flex;
					align-items: center;
					color: rgba(122, 130, 172, 1);
				}

				.select-coin {
					font-size: 32rpx;
					color: rgba(122, 130, 172, 1);
				}

				.select-fun-text {
					font-size: 32rpx;
					font-weight: 400;
					color: rgba(122, 130, 172, 1);
				}
			}
		}

		.form {
			margin: 20rpx 0;
			margin-bottom: 0;
			color: rgba(242, 160, 73, 1);
			background: #fff;
			border-radius: 16rpx;
			padding: 24rpx;
			box-shadow: 0px 4px 10px rgba(49, 49, 51, 0.08);

			.type {
				margin: 30rpx 0;
				display: flex;
				align-items: center;

				text {
					display: inline-block;
					padding: 6rpx 10rpx;
					border: 1px solid $hb-primary-color;
					border-radius: 6rpx;
					color: $hb-primary-color;
				}
			}

			.form-item {
				margin-top: 20rpx;

				&:first-child {
					margin-top: 0;
				}

				.tips {
					font-size: 24rpx;
					color: rgba(153, 153, 153, .6);
					margin-top: 10rpx;
				}

				.min-number-right {
					display: flex;
					flex-direction: row;
					align-items: center;

					&-coin {
						font-size: 28rpx;
						color: rgba(255, 255, 255, 0.5);
					}

					&-line {
						width: 1PX;
						height: 20rpx;
						background-color: rgba(255, 255, 255, 0.2);
						margin-left: 10rpx;
						margin-right: 10rpx;
					}

					&-all {
						font-size: 28rpx;
						color: rgba(255, 255, 255, 0.9);
					}
				}
			}

			.form-label {
				font-size: 24rpx;
				color: $hb-text-color;
				display: block;
				margin-top: 20rpx;
				margin-bottom: 10rpx;

				&:first-child {
					margin-top: 0;
				}
			}

			.form-footer-text {
				margin-top: 20rpx;
				font-size: 20rpx;
				color: $hb-primary-color;
			}
		}

		.explain {
			margin: 20rpx 0;
			padding: 20rpx 30rpx;

			.explain-text {
				font-size: 20rpx;
				color: $hb-text-color;
				line-height: 30rpx;
			}
		}

		.footer {
			margin-bottom: 60rpx;

			.footer-top {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				margin-top: 40rpx;
				margin-bottom: 20rpx;
			}

			.footer-top-label {
				font-size: 24rpx;
				font-weight: 400;
				color: $hb-text-color;
			}

			.footer-top-number {
				font-size: 24rpx;
				color: $hb-title-color
			}
		}
	}
</style>
